<template>
  <view class="hire_page">
    <AddressTimePicker ref="atp" />
    <view class=" _w-max _top _left _z-index-2 _pos-fixed _top _left"
      :style="{ 'background-color': 'rgba(255, 255, 255,' + srollOpacity + ')' }">
      <view :style="{ width: '100%', height: recHeight }"></view>
      <view class="felx_c h_96 f_s_18" style="position: relative;"
        :style="{ color: 'rgb(' + srollColor + ',' + srollColor + ',' + srollColor + ')' }">
        <view @click="toStore" style="position: absolute;left: 24rpx;top: 24rpx;" :style="{ filter: 'invert(' + scrollFilter + ')' }">
          <image style="width: 48rpx;height: 48rpx;" :src="imgs.CHEVRO" mode="" />
        </view>
        门店详情
      </view>
    </view>
    <image style="width: 100%;" :src="thumb" mode="" />
    <view class="container">
      <view style="padding: 32rpx;border-radius: 16rpx;background-color: #FFFFFF;margin-bottom: 20rpx;">
        <view
          style="height: 52rpx;display: flex;align-items: center;justify-content: space-between;margin-bottom: 24rpx;">
          <view style="font-size: 36rpx;font-weight: bold;line-height: 52rpx;">
            {{ details.title }}
          </view>
          <view style="color: rgba(0, 0, 0, 0.6);font-size: 24rpx;">{{ details.distance }}</view>
        </view>
        <view style="margin-bottom: 24rpx;font-size: 0;">
          <view v-if="!!details.is_store_take" class="tag">门店自取</view>
          <view v-if="!!details.is_door_take" class="tag">送车上门</view>
          <view v-if="!!details.is_free" class="tag" style="background-color: #F8F9FC;color: #FF5700;">免押金</view>
        </view>
        <view class="address-row" @click="callPhone(details.contact_tel)">
          <view class="poiaddress">电话：{{ details.contact_tel }}</view>
          <image style="width: 40rpx;height: 40rpx;flex: 0 0 40rpx" src="https://taxi.raxan.xyz/wechat/static/images/store_detail/a-phone.png" mode=""></image>
        </view>
        <view class="address-row" @click="previewMap(details)">
          <view class="poiaddress">地址：{{ details.poiaddress }}</view>
          <image style="width: 40rpx;height: 40rpx;flex: 0 0 40rpx" src="https://taxi.raxan.xyz/wechat/static/images/iocn-poiadress.png" mode="">
          </image>
        </view>
        <view style="border-bottom: 1rpx solid #E7E7E7;height: 0;transform: scaleY(0.5);"></view>
        <view class="description" :class="{ close_all: isExpland }">
          {{ details.short_desc }}
        </view>
        <view class="check_expland" @click="checkExplan" :style="isExpland ? '' : 'color: #008DFF'">
          {{ isExpland ? '展开' : '收起' }}
          <image style="width: 44rpx;height: 44rpx;" :src="isExpland ? imgs.ARROWD : imgs.ARROWU" mode="" />
        </view>
      </view>
      <!-- 导航栏 -->
      <scroll-view class="nav-scroll" scroll-x="true" style="white-space: nowrap;">
        <view v-for="(item, index) in navList" :key="index" class="nav-item"
          :class="{ 'nav-item-active': selectNavIndex === index }" @tap="switchTab(index, item.id)">
          {{ item.cate_name }}
          <view class="active-btm"></view>
        </view>
      </scroll-view>
      <!-- 菜单 --> 
      <view class="menu">
        <view class="menu-item" @click="openVehConfig()">
          配置选择
          <image style="width: 48rpx;height: 48rpx;flex: 0 0 48rpx;margin-left: 8rpx;" :src="imgs.ACDOWN" mode="" />
        </view>
        <picker @change="bindPickerChange" :value="seatIndex" style="flex: 1"  range-key="label" :range="seatList">
          <view class="menu-item">
            <text>座位数</text>
            <image style="width: 48rpx;height: 48rpx;flex: 0 0 48rpx;margin-left: 8rpx;" :src="imgs.ACDOWN" mode="" />  
          </view>
        </picker>
        <picker @change="bindGearPickerChange" style="flex: 1" :value="gearIndex"  range-key="label" :range="gearList">
          <view class="menu-item">
            <text>挡位</text>
            <image style="width: 48rpx;height: 48rpx;flex: 0 0 48rpx;margin-left: 8rpx;" :src="imgs.ACDOWN" mode="" />  
          </view>
        </picker>
      </view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" borderRadius="32rpx 32rpx 0 0">
        <view class="popup-container">
          <image class="close" :src="imgs.CLOSES" mode="" @click="closeVehConfig" />
          <view class="config-box">
            <view class="config-row">
              <view class="row-title">车辆配置</view>
              <view class="row-content">
                <view @click="() => config_id = item.id" v-for="item in vehConfig.car_config" :key="item.id" :class="{'config-item-active': config_id === item.id}" class="config-item">
                  {{ item.name }}
                </view>
              </view>
            </view>
            <view class="config-row">
              <view class="row-title">动力类型</view>
              <view class="row-content">
                <view @click="() => energy_type = item.id" v-for="item in vehConfig.engine" :key="item.id" :class="{'config-item-active': energy_type === item.id}" class="config-item">
                  {{ item.name }}
                </view>
              </view>
            </view>
            <view class="config-row">
              <view class="row-title">查看类型</view>
              <view class="row-content">
                <view @click="is_store_take = 1" :class="{'config-item-active': is_store_take === 1}" class="config-item">
                  门店自取
                </view>
                <view @click="is_door_take = 1" :class="{'config-item-active': is_door_take === 1}" class="config-item">
                  送车上门
                </view>
                <view @click="is_free = 1" :class="{'config-item-active': is_free === 1}" class="config-item">
                  免押金
                </view>
              </view>
            </view>
          </view>
          <view class="popup-btm">
            <view class="btm-item" @click="resetVehConfig">清空</view>
            <view class="btm-item btm-item-primary" @click="getStoreCars">确定</view>
          </view>
        </view>
			</uni-popup>
      <view>
        <view style="padding: 32rpx;background-color: #FFFFFF;border-radius: 16rpx;margin-bottom: 22rpx;" v-for="item in carList" :key="item.id">
          <view style="display: flex;align-items: center;justify-content: flex-start;">
            <image style="width:332rpx;height:160rpx;flex: 0 0 332rpx;margin-right: 8rpx;" :src="item.pic" mode="" />
            <view>
              <view style="line-height: 48rpx;font-size: 32rpx;color: rgba(0, 0, 0, 0.9);font-weight: 600;">
                {{ item.type_name }}
              </view>
              <view style="line-height: 40rpx;font-size: 24rpx;color: rgba(0, 0, 0, 0.6);">
                {{item.seat_num}}座/{{item.door}}门/{{item.gear}}
              </view>
            </view>
          </view>
          <view style="margin-top: 24rpx;margin-bottom: 26rpx; border-bottom: 1rpx solid #E7E7E7;"></view>
          <view style="display: flex;justify-content: space-between;" @click="() => callpopUp(item)">
            <view style="font-size: 26rpx;">
              日租：<text style="color: #FF5700;">{{item.total_prices}}元</text>
            </view>
            <view class="btn">
              立即租车
            </view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>
<script>
import AddressTimePicker from '@/pages/store_sub/detail/component/picker.vue'
import { getStoreDetails, getCateList, getVehConfig, getStoreCars } from '@/api/store.js'

import { getclientConfig } from '@/api/car.js'
const concat = name => 'https://taxi.raxan.xyz/wechat/static/images/store_detail/' + name

const IMAGES = {
  BANNER: concat('a-banner.png'),
  CHEVRO: concat('a-chevron-left.png'),
  ARROWD: concat('a-arrow-down.png'),
  ARROWU: concat('a-arrow-up.png'),
  ACDOWN: concat('a-caret-down-smal.png'),
  CLOSES: concat('close.png')
}

const seatList = [
  { label: '2座', value: 2 },
  { label: '3座', value: 3 },
  { label: '4座', value: 4 },
  { label: '5座', value: 5 },
  { label: '6座', value: 6 },
  { label: '7座', value: 7 },
  { label: '8座', value: 8 },
]

const gearList = [
  { label: '自动挡', value: 'auto' },
  { label: '手动', value: 'hand' },
]

const menus = ['配置选择', '座位数', '挡位']

export default {
  data() {
    return {
      thumb: '',
      seatIndex: "",
      gearIndex: "",
      details: {},
      navList: [],
      seatList,
      gearList,
      vehConfig: {
        car_config: [],
        engine: []
      },
      menus,
      recHeight: 0,
      imgs: IMAGES,
      srollOpacity: 0,
      srollColor: 255,
      scrollFilter: 0,
      isExpland: true,
      selectNavIndex: 0,
      type: '',
      config_id: "", // 车辆配置
      seat_num: "", // 座位数
      gear: "", // 档位 auto 自动挡 hand 手动
      energy_type: "", // 动力类型
      cate_id: "", // 车型分类	
      carList: [],
      is_store_take: 0,
      is_free: 0,
      is_door_take: 0
    }
  },
  components: {
    AddressTimePicker
  },
  onPageScroll(e) {
    this.scrollFilter = e.scrollTop < 100 ? Math.floor(e.scrollTop / 100) : 1;
    this.srollColor = e.scrollTop < 100 ? 255 - Math.floor(e.scrollTop * 2.55) : 0;
    this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 && e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
  },
  onShow() {},
  onLoad(options) {
    const { param } = options;
    this.details = JSON.parse(param);
    this.getPhoneInfo();
    this.getStoreDetails();
    this.getCateList();
    this.getVehConfig();
    this.getStoreCars();
    this.getclientConfig();
  },
  methods: {
    getclientConfig(){
      getclientConfig().then(res=>{
        this.thumb = res.data.apply_banner_one;
      })
    },
    callpopUp(item) {
      this.$refs.atp.open({
        ...item,
        place_id: this.details.id,
      });
    },
    createParams() {
      const {
        details,
        seat_num,
        gear,
        energy_type,
        config_id,
        cate_id,
        is_store_take,
        is_free,
        is_door_take
      } = this;
      const { id: place_id } = details;
      console.log(details)
      const params = {
        gear,
        cate_id,
        is_free,
        seat_num,
        is_store_take,
        is_door_take,
        energy_type,
        config_id,
        place_id
      }
      Object.keys(params).forEach(key => {
        if (params[key] === "") delete params[key];
      })
      return params;
    },
    bindPickerChange(e) {
      this.seatIndex = e.detail.value;
      this.seat_num = this.seatList[this.seatIndex].value;
      this.getStoreCars();
    },
    bindGearPickerChange(e) {
      this.gearIndex = e.detail.value;
      this.gear = this.gearList[this.seatIndex].value;
      this.getStoreCars();
    },
    resetVehConfig() {
      console.log(this.navList)
      this.energy_type = "";
      this.config_id = "";
      this.is_store_take = 0;
      this.is_free = 0;
      this.is_door_take = 0;
      this.getStoreCars();
    },
    switchTab(index, id) {
      this.selectNavIndex = index;
      this.cate_id = id;
      this.getStoreCars();
    },
    callPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber, // 电话号码
        success: function () {
          console.log('拨打电话成功');
        },
        fail: function () {
          console.log('拨打电话失败');
        }
      });
    },
    getStoreCars() {
      this.closeVehConfig();
      this.checkLoading(
        () => getStoreCars(this.createParams()).then(res => {
          this.carList = res.data || []
        })
      )
    },
    getVehConfig() {
      this.checkLoading(
        () => getVehConfig().then(res => {
          const data = res.data || {};
          this.vehConfig = {
            car_config: data.car_config || [],
            engine: data.engine || []
          }
        })
      )
    },
    getCateList() {
      this.checkLoading(
        () => getCateList().then(res => {
          this.navList = [
            { cate_name: '全部车型' },
            ...(res.data || [])
          ];
        })
      )
    },
    getStoreDetails() {
      this.checkLoading(
        () => getStoreDetails(this.details.id).then(res => {
          this.details = {
            ...this.details,
            ...(res.data || {})
          };
        })
      )
    },
    selectFilter(index) {
      const hooks = ['openVehConfig']
      const key = hooks[index]
      if (this[key]) {
        this[key]()
      }
    },
    checkExplan() {
      this.isExpland = !this.isExpland;
    },
    toStore() {
      uni.switchTab({
        url: `/pages/store/index`
      })
    },
    previewMap(param) {
      uni.navigateTo({
        url: `/pages/store_sub/address/index?param=${JSON.stringify(param)}`
      })
    },
    checkLoading(fn) {
      uni.showLoading({ title: '加载中' })
      fn().finally(uni.hideLoading)
    },
    // 获取顶部高度信息
    getPhoneInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
        }
      });
    },
    openVehConfig() {
      this.$refs.popup.open('bottom');
    },
    closeVehConfig() {
      if (this.$refs.popup) {
        this.$refs.popup.close();
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.h_96 {
  height: 96rpx;
}

.c_fff {
  color: #FFFFFF;
}

.f_s_18 {
  font-size: 36rpx;
}

.btn {
  padding: 0 16rpx;
  background: #008DFF;
  border-radius: 4rpx;
  line-height: 46rpx;
  font-size: 24rpx;
  color: #FFFFFF;
}

.felx_c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hire_page {
  box-sizing: border-box;
  position: relative;
  min-height: 100vh;
  background: #EEF8FF;
  color: rgba(0, 0, 0, 0.9);

  .container {
    position: relative;
    z-index: 1;
    margin-top: -40rpx;
    border-radius: 24rpx 24rpx 0 0;
    padding: 32rpx;
    padding-top: 0;

    .tag {
      display: inline-block;
      padding: 0 16rpx;
      line-height: 44rpx;
      font-size: 28rpx;
      text-align: center;
      background-color: #E6F3FF;
      margin-right: 12rpx;
      border-radius: 8rpx;
    }

    .address-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 24rpx;
      .poiaddress {
        width: 500rpx;
        flex: 0 0 500rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.9);
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .description {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
      line-height: 44rpx;
      text-align: left;
      margin: 24rpx 0;
    }

    .close_all {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .check_expland {
      color: rgba(0, 0, 0, 0.6);
      display: flex;
      line-height: 44rpx;
      align-items: center;
      justify-content: center;
    }

    .nav-scroll {
      white-space: nowrap;
      width: 100%;
    }

    .nav-item {
      display: inline-block;
      font-family: PingFang SC, PingFang SC;
      padding: 26rpx 32rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.9);
      line-height: 44rpx;
      line-height: 44rpx;
      font-size: 28rpx;
      position: relative;
      background-color: transparent;
      transition: color 0.15s linear;
    }

    .nav-item-active {
      color: #008DFF;
      font-weight: bold;
      position: relative;

      .active-btm {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 32rpx;
        height: 6rpx;
        background: #008DFF;
        border-radius: 1998rpx;
      }
    }

    .menu {
      height: 96rpx;
      background: #FFFFFF;
      margin: 24rpx 0;
      border-radius: 16rpx;
      display: flex;

      .menu-item {
        flex: 1;
        height: 96rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-weight: 400;
      }
    }
  }

  .popup-container {
    height: 860rpx;
    position: relative;
    .close {
      height: 44rpx;
      width: 44rpx;
      position: absolute;
      right: 16rpx;
      top: 16rpx;
    }
    .config-box {
      padding: 32rpx;
      padding-bottom: 0;
      height: 714rpx;
      .config-row {
        margin-bottom: 32rpx;
        .row-title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: rgba(0,0,0,0.9);
          line-height: 44rpx;
          text-align: left;
          margin-bottom: 24rpx;
        }
        .row-content {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex-wrap: wrap;
          gap: 16rpx;
          .config-item {
            width: 159rpx;
            flex: 0 0 159rpx;
            line-height: 68rpx;
            border-radius: 12rpx;
            background: #F3F3F3;
            text-align: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            text-align: center;
            color: rgba(0,0,0,0.6);
            margin-bottom: 32rpx;
            &.config-item-active {
              background-color: #F2F3FF;
              color: #008DFF;
            }
          }
        }
      }
    }

    .popup-btm {
      display: flex;
      padding: 32rpx;
      height: 144rpx;
      background: #FFFFFF;
      border-top: 1rpx solid #E7E7E7;
      align-items: center;
      gap: 32rpx;
      .btm-item {
        width: 327rpx;
        flex: 0 0 327rpx;
        line-height: 80rpx;
        background: #F2F3FF;
        border-radius: 12rpx;
        color: #008DFF;
        text-align: center;
        &.btm-item-primary {
          color: #FFFFFF;
          background-color: #008DFF;
        }
      }
    }
  }
}
</style>
